import 'package:dio/dio.dart';
import 'package:flower/components/cached_image_widget.dart';
import 'package:flower/utils/my_colors.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../../config/service_url.dart';
import '../../../model/cart_list.dart';
import '../../../provider/cart_model.dart';
import '../../../utils/http_util.dart';

class Cart extends StatefulWidget {
  const Cart({super.key});

  @override
  State<Cart> createState() => _CartState();
}

class _CartState extends State<Cart> {
  @override
  void initState() {
    super.initState();
    _queryCartListData();
  }

  void _queryCartListData() async {
    Response result = await HttpUtil.get(listUserCart);
    CartListModel cartListModel = CartListModel.fromJson(result.data);
    setState(() {
      context.read<CartModel>().setCartListData(cartListModel.data);
    });
  }

  var boxDecoration = const BoxDecoration(
    color: MyColors.white,
    border: Border(
        bottom: BorderSide(
            width: 1,
            color: MyColors.driver)),
  );

  @override
  Widget build(BuildContext context) {
    List<CartData> cartListData =
        Provider.of<CartModel>(context, listen: false).getAllFlower();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: MyColors.white,
        title: const Text("购物车"),
        titleTextStyle: const TextStyle(fontSize: 16, color: MyColors.normal),
        centerTitle: true,
      ),
      body: Stack(
        children: [
          cartListData.isNotEmpty
              ? ListView.builder(
                  itemCount: cartListData.length,
                  itemBuilder: (BuildContext context, int index) {
                    final cartItem = cartListData[index];
                    return Container(
                      decoration: boxDecoration,
                      padding: const EdgeInsets.all(15),
                      child: Stack(
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              InkWell(
                                onTap: () {
                                  context.read<CartModel>().setCartItemStatus(cartItem.fid);
                                },
                                child: Image.asset(
                                  context
                                          .watch<CartModel>()
                                          .getFlowerIsCheck(cartItem.fid)
                                      ? "assets/images/checkbox_round_1.png"
                                      : "assets/images/checkbox_round_2.png",
                                  height: 23,
                                  width: 22,
                                ),
                              ),
                              const SizedBox(width: 10), // 添加间距
                              ClipRRect(
                                borderRadius:
                                    const BorderRadius.all(Radius.circular(20)),
                                child: CachedImageWidget(
                                  115,
                                  115,
                                  cartItem.coverUrl,
                                  fit: BoxFit.cover,
                                ),
                              ),
                              const SizedBox(width: 10), // 添加间距
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(cartItem.name,
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(
                                            fontSize: 15,
                                            color: MyColors.normal)),
                                    Padding(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 4),
                                      child: Text(cartItem.ename,
                                          style: const TextStyle(
                                              fontSize: 13,
                                              color: MyColors.title)),
                                    ),
                                    Text("¥${cartItem.amount}",
                                        style: const TextStyle(
                                            fontSize: 15,
                                            color: MyColors.normal)),
                                  ],
                                ),
                              ),
                              IconButton(
                                icon: const Icon(Icons.close,
                                    color: MyColors.title),
                                onPressed: () {
                                  // 处理删除购物车项的逻辑
                                  context
                                      .read<CartModel>()
                                      .removeItem(cartItem.fid);
                                },
                              ),
                            ],
                          ),
                          Positioned(
                            bottom: 0,
                            right: 0,
                            child: Row(
                              children: [
                                IconButton(
                                  icon: const Icon(Icons.remove,
                                      color:
                                      MyColors.title),
                                  onPressed: () {
                                    context
                                        .read<CartModel>()
                                        .decrementQuantity(cartItem.fid);
                                  },
                                ),
                                Text('${cartItem.number}',
                                    style: const TextStyle(
                                        fontSize: 15,
                                        color: MyColors.normal)),
                                IconButton(
                                  icon: const Icon(Icons.add,
                                      color:
                                      MyColors.name),
                                  onPressed: () {
                                    context
                                        .read<CartModel>()
                                        .incrementQuantity(cartItem.fid);
                                  },
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                )
              : Container(
                  alignment: Alignment.topCenter,
                  margin: const EdgeInsets.only(top: 200),
                  child: const Text("购物车还是空的yo 快去买花吧~",
                      style: TextStyle(
                          fontSize: 20,
                          color: MyColors.title)),
                ),
          Visibility(
              visible: cartListData.isNotEmpty,
              child: Positioned(
                  bottom: 0,
                  width: MediaQuery.of(context).size.width,
                  child: Container(
                    height: 60,
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    margin: const EdgeInsets.all(15),
                    decoration: BoxDecoration(
                      color: MyColors.white,
                      border: Border.all(
                        color: MyColors.border, //边框颜色
                        width: 1, //边框宽度
                      ),
                      boxShadow: const [
                        BoxShadow(
                          blurRadius: 2, //阴影范围
                          spreadRadius: 1, //阴影浓度
                          color: MyColors.title, //阴影颜色
                        ),
                      ],
                      borderRadius: BorderRadius.circular(10), // 圆角也可控件一边圆角大小
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        InkWell(
                          onTap: () {
                            context.read<CartModel>().setAllStatus();
                          },
                          child: Image.asset(
                            Provider.of<CartModel>(context, listen: true)
                                    .getAllStatus()
                                ? "assets/images/checkbox_round_1.png"
                                : "assets/images/checkbox_round_2.png",
                            height: 30,
                            width: 30,
                          ),
                        ),
                        Row(
                          children: [
                            const Text(
                              "合计：",
                              style: TextStyle(fontSize: 16),
                            ),
                            Text(
                              "￥${Provider.of<CartModel>(context, listen: true).getFlowerAllPrice()}",
                              style: const TextStyle(fontSize: 16),
                            ),
                            const SizedBox(
                              width: 25,
                            ),
                            Container(
                              height: 40,
                              width: 90,
                              decoration: const BoxDecoration(
                                color: MyColors.red,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(50)),
                                boxShadow: [
                                  BoxShadow(
                                    blurRadius: 2, //阴影范围
                                    spreadRadius: 1, //阴影浓度
                                    color: MyColors.title, //阴影颜色
                                  ),
                                ],
                              ),
                              child: TextButton(
                                onPressed: () {
                                  // 购物车为空的时候,不能提交订单
                                  if (Provider.of<CartModel>(context,
                                          listen: false)
                                      .getCheckFlower()
                                      .isEmpty) {
                                    return;
                                  }
                                  Navigator.pushNamed(context, "/submit");
                                },
                                child: const Text(
                                  '去结算',
                                  style: TextStyle(
                                      color: MyColors.white,
                                      fontSize: 15,
                                      fontWeight: FontWeight.bold),
                                ),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  )))
        ],
      ),
    );
  }
}
